<template>
    <div class="jump-out">
        <div class="modal">
            <div class="top">
                <div class="title">
                    <i class="el-icon-warning"></i>

                    请注意您的账号和财产安全
                </div>

                <div class="context">
                    您即将离开{{CONFIG_PROJECT.title}}，去往：

                    <span @click="jumpHandler">{{link}}</span>
                </div>
            </div>

            <div class="bottom">
                <div class="left">
                    <span>{{time}}</span>
                    秒后自动跳转
                </div>

                <div class="right">
                    <el-button class="btn" type="primary" plain @click="jumpHandler">继续</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CONFIG_PROJECT from '@config/project';

const DEFAULT_TIME = 5;

export default {
    layout: 'empty',
    data() {
        return {
            CONFIG_PROJECT,
            
            link: '-',

            timer: null,
            time: DEFAULT_TIME,
        };
    },
    methods: {
        getLink() {
            this.link = this.getQuery('link');
        },
        timeCountDown() {
            this.stopTimeCountDown();

            this.time = DEFAULT_TIME;

            this.timer = setInterval(() => {
                this.time --;

                if (this.time <= 0) {
                    this.stopTimeCountDown();

                    this.jumpHandler();
                }
            }, 1000);
        },
        stopTimeCountDown() {
            try {
                clearInterval(this.timer);
            } catch(e) {};
        },
        jumpHandler() {
            if (!this.link) {
                return;
            }

            window.location.replace(this.link);
        },
    },
    created() {
        this.getLink();
    },
    mounted() {
        this.timeCountDown();
    }
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .jump-out{
        background: #f5f7fd;
        height: 100%;

        .modal {
            width: 760px;
            background: white;
            border-radius: 4px;
            padding: 30px;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            box-shadow: #DCDFE6 0 0 20px;
            cursor: default;

            .top{
                border-bottom: 1px solid #E4E7ED;

                .title{
                    font-size: 22px;
                    line-height: 1em;
                    font-weight: bold;
                    color: $primaryColor;
                    background: $primaryColor4;
                    padding: .5em;
                    border-radius: 4px;
                }

                .context{
                    padding: 30px 0;
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    span {
                        color: $primaryColor;
                        cursor: pointer;
                    }
                }
            }

            .bottom{
                display: flex;
                align-items: center;
                padding-top: 30px;

                .left{
                    flex: 1;
                    color: #909399;
                    font-size: 16px;

                    span{
                        color: $primaryColor;
                        font-size: 18px;
                        font-weight: bold;
                    }
                }

                .right{
                    .btn{
                        padding-left: 2em;
                        padding-right: 2em;
                    }
                }
            }
        }
    }
</style>